import { BaseComp } from '../../../common/component/comp';
import { ZRenderComp } from '../../../common/component/zrComp';
import events from '../../compute/v1/events';
import layout from '../../compute/v1/layout';

import { Desk } from './desk';

class Panel extends BaseComp {
	constructor(args) {
		super(null);
		this.context = args.context;
		this.div = this.initDom();
		const zrender = this.zrender = args.zrender;
		this.zr = zrender.init(this.div);

		this.params = {
			title : ''
		};

		this.bg = new Background({ parent : this });
		this.bottom = new Bottom({ parent : this });
		this.window = new Window({ parent : this });
		this.desk = new Desk({ parent : this });

		this.startTick = this.startTick.bind(this);
	}

	init() {
		this.lastHandler = requestAnimationFrame(this.startTick);
	}

	startTick() {
		this._tick();
	}

	initDom() {
		const width = layout.global.width, height = layout.global.height;

		// 先要创建 Dom
		const main = document.getElementById('main');
		main.style.width = width + 'px';
		main.style.height = height + 'px';

		let content = document.createElement('div');
		content.id = "panel";
		content.style.position = 'absolute';
		content.style.overflow = 'hidden';
		content.style.width = width + 'px';
		content.style.height = height + 'px';
		content.style.left = '0px';
		content.style.top = '0px';
		main.appendChild(content);
		return content;
	}

	destroy() {
		super.destroy();
		cancelAnimationFrame(this.lastHandler);
	}

	tick() {
		this.lastHandler = requestAnimationFrame(this.startTick);
	}
}

class Background extends ZRenderComp {
	constructor(args) {
		super(args.parent);
		this.useParentZRenderInstance();
	}

	init() {
		// 背景版
		this.createRect(layout.global.width, layout.global.height)
			.fillLinearGradient(0, 0, 0, 1, [
				{offset:0,   color: layout.colors.strokeBgL3},
				{offset:0.2, color: layout.colors.strokeBgL2},
				{offset:0.76,color: layout.colors.strokeBg},
				{offset:1,   color: layout.colors.strokeBgD3}
			])
			.z(0, 0)
			.build();

		// 扫描线
		let paths = [];
		const endY = (layout.desk.height + layout.desk.y);
		for (var y = 0; y < endY; y += 4) {
			paths.push(`M0,${y}h${layout.global.width}z`);
		}
		this.createPathFromString(paths.join(','))
			.stroke('black', 1)
			.opacity(0.4)
			.z(0, 1)
			.build();
	}
}

/**
 * 展示屏幕上四个挖空的区域, 每个区域一个 Window, 四人撕逼共 4 个, 普通 4:3 界面有 1 个
 *
 * zlevel : 0
 */
class Window extends ZRenderComp {
	width = 0;
	height = 0;
	strokeWidth = 1;

	constructor(args) {
		super(args.parent);
		const _layout = layout.windows[0];
		this.useParentZRenderInstance(_layout.x, _layout.y);

		this.width = _layout.width;
		this.height = _layout.height;
		this.strokeWidth = _layout.strokeWidth;

		this.on(events.STYLE_LR_UPDATED, this.onStyleLRUpdated.bind(this));
	}

	init() {
		const { width, height, strokeWidth } = this;

		// 外框
		this.spWindow = this.createRect(width, height)
			.fill('transparent')
			.stroke(layout.colors.strokeNormal, strokeWidth)
			.shadow(layout.colors.strokeNormal, 5)
			.z(0, 100)
			.build();

		// 挖空的部分
		this.spDestinationOut = this.createRect(width, height)
			.blend('destination-out')
			.z(0, 1000)
			.build();
	}

	onStyleLRUpdated() {
		const _layout = layout.windows[0];
		this.moveTo(_layout.x, _layout.y);
	}
}

class Bottom extends ZRenderComp {
	constructor(args) {
		super(args.parent);
		this.useParentZRenderInstance(layout.bottom.x, layout.bottom.y);
	}

	init() {
		const compLayout = layout.bottom;

		this.createLine(0, 0, compLayout.width, 0)
			.stroke(layout.colors.strokeNormal, 2)
			.shadow(layout.colors.strokeNormal, 5)
			.z(200, 100)
			.build();
		// 渐变颜色的底
		this.createRect(compLayout.width, compLayout.height)
			.fillLinearGradient(0, 0, 0, 1, [
				{offset:0, color:'#FFF'},
				{offset:0.04, color:layout.colors.strokeBgL3},
				{offset:0.86, color:layout.colors.strokeBgL1}
			])
			.z(200, 99)
			.build();
	}
}

export {
	Panel
};
